<template>
    <div>
        <h1>等级列表显示</h1>
    </div>
    等级数据: <input type="text" v-model="info.name">
    权益数据: <input type="text" v-model="info.quan">
    <input type="button" value="查询" @click="show">
    <table class="table table-bordered">
        <tbody>
            <tr>
                <td>Id</td>
                <td>等级名称</td>
                <td>状态</td>
                <td>权益</td>
                <td>消费金额</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in data.list" :key="item.userVipId">
                <td>{{ item.userVipId }}</td>
                <td>{{ item.userVipName }}</td>
                <td>{{ item.state == 1 ? "开启" : "禁用" }}</td>
                <td>{{ item.userVipQ }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <input type="button" value="修改状态" class="btn btn-info" @click="update(item.userVipId)">
                </td>
            </tr>
        </tbody>
    </table>

    <span>共{{ data.totalcount }}条</span>
    <span>每页{{ info.pagesize }}条</span>
    <span>共{{ info.pageindx }}/{{ data.totalpage }}页</span>

    <input type="button" value="首页" @click="gopage(1)">
    <input type="button" value="上一页" @click="gopage(info.pageindx - 1)">
    <span v-for="item in info.pageindx">{{ item }}</span>

    <input type="button" value="下一页" @click="gopage(info.pageindx + 1)">
    <input type="button" value="尾页" @click="gopage(data.totalpage)">
    <input type="number" v-model="info.pageindx">
    <input type="button" value="跳转" @click="gopage(info.pageindx)">
    <select v-model="info.pagesize" @change="tiao">

        <option :value="item" v-for="item in arr">{{ item }}</option>
    </select>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();

let info: any = reactive({
    pageindx: 1,
    pagesize: 2,
    name: "",
    quan: "",
})
let data: any = reactive({
    totalcount: 0,
    totalpage: 0,
    list: [],
})

onMounted(() => {
    show();

})
let arr: any = ref([2, 4, 6]);
const show = () => {
    axios({
        url: 'https://localhost:7173/api/User/GetUserVip',
        method: 'get',
        params: info,
    })
        .then(res => {
            Object.assign(data, res.data);
        })
}
const tiao = () => {
    info.pageindx = 1;
    show();
}
const update = (id: any) => {
    axios({
        url: 'https://localhost:7173/api/User/UpdateUserVip',
        method: 'put',
        params: {
            ids: id,
        }
    })
        .then(res => {
            if (res.data > 0) {
                show();
            }
        })
}
const gopage = (num: any) => {
    if (num < 1) {
        info.pageindx = 1;
        return;
    }
    if (num > data.totalpage) {
        info.pageindx = data.totalpage;
        return;
    }
    info.pageindx = num;
    show();
}
</script>




<style scoped></style>